<template>
	<div>
		<div>
			<span>
				<el-input style='width:200px' size='mini' v-model='filter.searchKey' placeholder='请输入内容'></el-input>
				<el-select clearable style='width:100px;margin-left:5px;' size='mini' v-model='filter.searchType' placeholder='搜索类型'>
					<el-option v-for='(item, key) in {1 : "订单号", 2 : "卡号", 3 : "用户手机号"}' :label='item' :value='key'></el-option>
				</el-select>
			</span>
			<span class='m-l-10'>
				<span>下单时间</span>
				<el-date-picker
					style='width:250px'
					class='m-l-10'
					size='mini'
					v-model='filter.date'
					type='daterange'
					align='right'
					unlink-panels
					range-separator='-'
					value-format="yyyy-MM-dd"
					start-placeholder='开始日期'
					end-placeholder='结束日期'>
				</el-date-picker>
			</span>
			<el-button class='m-l-10' size='mini' type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
			<span class='m-l-30'>
				<el-button size='mini' type='primary' :icon='{"el-icon-download" : !downloadLoading, "el-icon-loading" : downloadLoading}' @click='handleDownload'>导出</el-button>
			</span>
		</div>
		<section class='m-t-50'>
			<el-table style='width:100%;font-size:12px;' ref='multipleTable' :data='orderList'>
				<el-table-column label='订单号' align='center'>
					<template slot-scope='scope'>{{ scope.row.orderNo }}</template>
				</el-table-column>
				<el-table-column label='卡号' align='center'>
					<template slot-scope='scope'>{{ scope.row.cardUID }}</template>
				</el-table-column>
				<el-table-column label='用户名' align='center'>
					<template slot-scope='scope'>{{ scope.row.userName }}</template>
				</el-table-column>
				<el-table-column label='用户手机' align='center'>
					<template slot-scope='scope'>{{ scope.row.userMobile }}</template>
				</el-table-column>
				<el-table-column label='充值金额' align='center'>
					<template slot-scope='scope'>{{ scope.row.rechargeAmount}}</template>
				</el-table-column>
				<el-table-column label='充值时间' align='center'>
					<template slot-scope='scope'>{{ scope.row.rechargeTime }}</template>
				</el-table-column>
				<el-table-column label='归属账号' align='center'>
					<template slot-scope='scope'>{{ scope.row.affiliationAccount }}</template>
				</el-table-column>
				<el-table-column label='订单状态' align='center'>
					<template slot-scope='scope'>{{ status[scope.row.status] }}</template>
				</el-table-column>
			</el-table>
			
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='orderList = $event' url='order/getCardRechargeOrder'></pagination>
			</div>
			
		</section>
		
	</div>
</template>

<script src='./cardRecharge.js'></script>